
<template>
  <div>
<!-- 第一个商品 -->
<div class="header_box">
      <span @click="$router.go(-1)" v-if="$route.path!='/home'" class="goback">
        <van-icon style="margin-right:3px;" name="arrow-left" />
        返回
      </span>
      真香购物车
    </div>
<div class="kong"></div>
 <van-pull-refresh v-model="isLoading"  success-text="刷新成功" @refresh="onRefresh">
  <div v-if="car.length == 0 ? true : false " class="empty">
            <!-- <img src="../../assets/cart_empty.9f725555.png" alt /> -->
            <p>购物车空空如也</p>
            <van-button to="/goods/list" class="van-button--mini" type="info">
              <span>去逛逛</span>
            </van-button>
          </div>
          <div v-else style="min-height: 200px;" >

            <van-swipe-cell v-for="item in optimizationCar" :key="item.id">
              <van-card
                :num="item.cou"
                :price="item.sell_price"
                :title="item.title"
                :thumb="item.thumb_path"
              >
                <div slot="footer">
                  <van-stepper @change="changeCar(item.cou,item.id)" v-model="item.cou" integer  />
                </div>
              </van-card>
              <template slot="right">
                <van-button class="btn" square type="danger" text="删除" @click="momo(item.id)" />
              </template>
            </van-swipe-cell>
          </div>
</van-pull-refresh>

<!-- 有数据后将:price="total"替换:price="3050" -->
<van-submit-bar
  :price="total"
  button-text="提交订单"

/>

  </div>
</template>
<script>
// 引入vuex中的属性和方法
import { mapState, mapGetters } from 'vuex'
export default {
  data () {
    return {
      carCommodity: [],
      isLoading: false,
      visible: false
    }
  },
  // created () {
  //   this.getCarCommodity()
  //   this.carCommodity && this.getCarList()
  // },
  // mounted () {
  //   this.visible = true
  // },
  methods: {
    // splist () {
    //   this.$http.get('/api/goods/getshopcarlist/88,87,89').then(function (ret) {
    //     console.log(ret.data)
    //   })
    // },
    // getCarCommodity () {
    //   this.carCommodity = JSON.parse(window.localStorage.getItem('car'))
    // },
    // getCarList () {
    //   this.$store.dispatch('getCar', this.getId)
    //   this.optimizationData()
    // },
    momo (id) {
      this.$dialog
        .confirm({
          title: '删除商品',
          message: '确定要删除吗'
        })
        .then(() => {
          // on confirm
          // this.carCommodity = this.carCommodity.filter(item => item.id !== id)
          // window.localStorage.setItem('car', JSON.stringify(this.carCommodity))
          console.log(this)

          this.parentNode.parentNode.removeChild(this.parentNode)
          window.location.reload()
        })
        .catch(() => {
          // on cancel
        })
    },
    onRefresh () {
      setTimeout(() => {
        // Toast('刷新成功');
        this.isLoading = false
        // this.getCarList()
      }, 1000)
    },
    // optimizationData () {
    //   var countData = []
    //   this.carCommodity.forEach(item => {
    //     countData.push({ count: item.count, id: item.id })
    //   })
    //   this.$store.commit('optimizationData', countData)
    // }
    // ,
    changeCar (cou, id) {
      // this.carCommodity.map(item => {
      //   if (item.id === id) {
      //     item.count = cou
      //   }

      // })

      // window.localStorage.setItem('car', JSON.stringify(this.carCommodity))

    }

  },
  computed: {
    // 计算总价
    total () {
      var price = 0
      if (this.car.length !== 0) {
        this.car.forEach(item => {
          price += item.sell_price * item.cou
        })
        return price * 100
      }
      return price
    },

    // getId () {
    //   var id = []
    //   if (this.carCommodity) {
    //     this.carCommodity.forEach(item => {
    //       id.push(item.id)
    //     })
    //     if (id.length === 1) return id
    //     return id.join(',')
    //   }
    //   return id
    // },
    // 把vuex的变量引入到本地
    // 展开运算符
    ...mapState(['car']),
    ...mapGetters(['optimizationCar'])
  }
}
</script>
<style lang="less" scoped>
van-nav-bar{
  color: white
}
i{
  color: red;
  font-style: normal
}
.sumprice{
  position:absolute;
  right:0px;
  bottom:0px;
}
.number{
  display: inline-block;
  width:30px;
}
.van-nav-bar__text{
  color: white
}
.van-card__price-integer,.van-card__price-currency{
  color: red
}
.header_box {
  width:100%;
  height:40px;
  background: #1989fa;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
  position: fixed;
  top:0;
  left:0;
  z-index:1;
}
.goback {
  position: fixed;
  top:0px;
  display: flex;
  align-items: center;
  left:15px;
}
.kong{
  height: 1.06667rem;
}
.empty{
  text-align: center;
  font-size: .361111rem;
}
</style>
